<template>
  <div class="community-list">
    <el-row :gutter="24">
      <template v-if="communityList.length>0">
      <el-col @click="goDetail(item)" :span="6" v-for="item in communityList" :key="item.id">
        <el-card class="community-card">
          <div class="card-content">
            <div class="card-title">{{ item.name }}</div>
            <!-- <div class="card-status">
              <el-tag type="info" size="small" v-if="!item.certified">未认证</el-tag>
            </div>
            <div class="card-expire">有效期至：{{ item.expireText }}</div> -->
            <!-- <el-tag type="primary" size="small" class="admin-tag">超级管理员</el-tag> -->
          </div>
          <div class="card-actions">
            <el-button type="text" icon="el-icon-edit" @click="editCommunity(item)"></el-button>
            <el-button type="text" icon="el-icon-share" @click="shareCommunity(item)"></el-button>
          </div>
          </el-card>
        </el-col>
      </template>
      <template v-else>
        <el-col :span="6">
          <el-card class="community-card">
            <div class="card-content">
              <div class="card-title">暂无小区,请联系管理员开通</div>
              <el-button link   type="primary" @click="logout">退出登录</el-button>
            </div>
          </el-card>
        </el-col>
      </template>
      <!-- 创建小区卡片 -->
      <el-col :span="6" v-if="isSuperAdmin">
        <el-card class="community-card create-card" @click="createCommunity">
          <div class="create-content">
            <div class="create-plus">+</div>
            <div>创建小区</div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!-- 小区表单组件 -->
    <CommunityForm
      :visible="drawerVisible"
      :is-edit="isEdit"
      :form-data="currentFormData"
      :area-options="areaOptions"
      @update:visible="drawerVisible = $event"
      @success="init"
    />
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { getUserCommunity, getAreas } from '@/api/house/community'
import useUserStore from '@/store/modules/user'
import CommunityForm from '@/views/house/community/components/CommunityForm.vue'
const userStore = useUserStore()
const router = useRouter()
const route = useRoute()

const communityList = ref([])
const drawerVisible = ref(false)
const isEdit = ref(false)
const currentFormData = ref({})
const areaOptions = ref([])
const isSuperAdmin = ref(false)

function handleAdd() {
  currentFormData.value = {}
  isEdit.value = false
  drawerVisible.value = true
}
function handleEdit(item) {
  isEdit.value = true
  currentFormData.value = { ...item }
  drawerVisible.value = true
}


const init = async () => {
  const res = await getUserCommunity({ pageNum: 1, pageSize: 1000 })
  communityList.value = res.data
}

const getAreaList = async () => {
  const res = await getAreas()
  areaOptions.value = res?.rows || []
}

function logout() {
  userStore.logOut().then(() => {
      location.href = '/index'
    })
}

onMounted(() => {
  console.log("userStore",userStore.roles  )
  isSuperAdmin.value = userStore.roles.includes('admin')
  init()
  getAreaList()
})

function goDetail(item) {
  console.log("item",item)
  const { name, communityId } = item
  userStore.setCommunityId({ communityId, communityName: name, 
  communityImg: item.img })
  localStorage.setItem('communityId', communityId)
  localStorage.setItem('communityName', name)
  localStorage.setItem('communityImg', item.img)
  
  
  router.push({ path: '/' })
}

function editCommunity(item) {
  handleEdit(item)
}
function shareCommunity(item) {
  // 分享逻辑
}
function createCommunity() {
  handleAdd()
}
</script>

<style scoped>
.community-list {
  padding: 24px;
  background: #f6f6f6;
  min-height: 100vh;
}
.community-card {
  min-height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-bottom: 20px;
}
.card-content {
  padding-bottom: 16px;
}
.card-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 8px;
}
.card-status {
  margin-bottom: 8px;
}
.card-expire {
  color: #888;
  font-size: 14px;
  margin-bottom: 8px;
}
.admin-tag {
  margin-bottom: 8px;
}
.card-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.create-card {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  color: #666;
  font-size: 20px;
  background: #fff;
  border: 1px dashed #d9d9d9;
}
.create-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.create-plus {
  font-size: 48px;
  line-height: 1;
  margin-bottom: 8px;
}
</style>